<template>
  <div class="login_container">
    <el-row>
      <!--      vue是24-col模型-->
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form
          class="login_form"
          :model="loginForm"
          :rules="rules"
          ref="loginForms"
        >
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <!--          prop需要定义在item标签-->
          <el-form-item prop="username">
            <!--            不绑定时无法输入, 数据需要绑定input控件-->
            <el-input
              v-model="loginForm.username"
              :prefix-icon="User"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <!--            fixme: 扩大prettier的max-len-->
            <el-input
              type="password"
              show-password
              v-model="loginForm.password"
              :prefix-icon="Lock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login_btn"
              type="primary"
              @click="login"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
import { useRoute, useRouter } from 'vue-router'
import { ElNotification, FormRules } from 'element-plus'
import { getTime } from '@/utils/time'

// loading写在 finally 里面
let loginForm = reactive({ username: 'admin', password: 'atguigu123' })
let useStore = useUserStore()
let $router = useRouter()
let loading = ref(false)
let $route = useRoute()
let loginForms = ref()

const login = async () => {
  // 保证全部表单相校验通过再发请求, 因为表单控件有错误提示, 故没有捕捉Promise.rejectt
  await loginForms.value.validate()
  try {
    loading.value = true
    await useStore.userLogin(loginForm)
    // 没有处理Promise时IDE会有提示, 是潜在的bug
    const redirect = $route.query.redirect as string
    if (redirect) {
      // 跳转到退出登录前的页面
      await $router.push(redirect)
    } else {
      await $router.push('/')
    }

    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `Hi, ${getTime()}好`,
    })
  } catch (e) {
    ElNotification({
      type: 'error',
      message: e.message,
    })
  } finally {
    loading.value = false
  }
}

const validatorUserName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
      callback(new Error('用户名格式有误'))
    }
  }

  callback()
}

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { validator: validatorUserName, trigger: 'change' },
    { validator: validatorUserName, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 24, message: '密码长度有误', trigger: 'blur' },
  ],
})
</script>

<style scoped lang="scss">
// 登录表单容器
.login_container {
  // 宽高
  width: 100%;
  height: 100vh;
  // 背景
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  // 登录表单
  .login_form {
    // 背景
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;

    // 填充, 从而将内容推离盒子border
    padding: 40px;

    // 相对定位, 指定上边距
    position: relative;
    top: 30vh;

    // 指定宽度为使父容器宽度的80%
    width: 80%;

    // 标题
    h1 {
      color: white;
      font-size: 40px;
    }

    // 副标题
    h2 {
      color: white;
      font-size: 20px;
      // 踢开上下元素
      margin: 20px 0px;
    }

    // 登录按钮
    .login_btn {
      // 宽度
      width: 100%;
    }
  }
}
</style>
